<!-- 参政议政 -->
<template>
  <Pannel ref="oPannel" @load="handleLoadData" @refresh="handleRefresh">
    <view class="pannel-inner-box">
      <NavBar></NavBar>
      <image class="bg-image" :src="bg" mode="widthFix" />
      <PickerYear class="picker-year" :initYear="curYear" @change="handleYearChange"></PickerYear>
      <view class="area-1">
        <view class="area-1-item">
          <image class="image" :src="card_1" mode="scaleToFill" />
          <view class="msg">
            <view class="num">{{ data.personDataList?.length || 0 }}</view>
            <view class="text">扶贫总人数</view>
          </view>
        </view>
        <view class="area-1-item">
          <image class="image" :src="card_2" mode="scaleToFill" />
          <view class="msg">
            <view class="num">{{ data.allCount || 0 }}</view>
            <view class="text">活动总数</view>
          </view>
        </view>
      </view>

      <view class="area-2 list" v-if="data.personDataList && data.personDataList.length">
        <view class="item" v-for="(item, index) of data.personDataList" :key="index" @click="onJump({ url: '/subPackB/fpgz/detail' }, item)">
          <view class="header">
            <view class="title">{{ item.name }}</view>
            <view class="datail-btn iconfont icon-jiantou"></view>
          </view>
          <view class="content">
            <view class="row">
              <view class="text">扶贫得分</view>
              <view class="num">{{ item.score || 0 }}</view>
            </view>
            <view class="row">
              <view class="text">活动次数</view>
              <view class="num">{{ item.maps?.length || 0 }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>

  </Pannel>
</template>

<script lang="ts" setup>
import bg from "./static/base64/bg";
import card_1 from "./static/base64/card_1";
import card_2 from "./static/base64/card_2";

import useDetail from "@/store/detail";
import { requestPost } from "@/hooks/api";

const [ data, fetchData ] = requestPost('/ascreen/home/fpgzHomeList/ajax');

import { ref, watch } from "vue";


const oPannel = ref(null) as any;

const [ detail, setDetail ] = useDetail();

const curYear = ref(detail.value) as any;

watch(curYear, () => {
  oPannel.value?.dataLoad( fetchDatas );
});

const handleYearChange = (year: any) => {
  curYear.value = year;
}

const onJump = (data: any, params: any = {}) => {
  setDetail(params);
  uni.navigateTo(data);
}

//  上拉刷新
const handleRefresh: any = (callback: any): any => {
  callback(fetchDatas);
};

const handleLoadData: any = (callback: any): any => {
  callback( fetchDatas );
};

async function fetchDatas() {
  await fetchData({ year: curYear.value });
}
</script>

<style lang="scss" scoped>
.image {
  width: 100%;
  height: 100%;
}

.charts-box {
  position: relative;
  width: 100%;
  height: 300px;

  .qiun_data_charts {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
}

.pannel-inner-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;

  .bg-image {
    position: absolute;
    width: 100%;
  }

  .picker-year {
    position: absolute;
    top: 236rpx;
    left: 328rpx;
  }

  .area-1 {
    display: flex;
    justify-content: space-between;
    margin-top: 360rpx;
    width: 686rpx;

    .area-1-item {
      position: relative;
      display: flex;
      width: 332rpx;
      height: 160rpx;

      background-color: #fff;
      border-radius: 16rpx;
      overflow: hidden;

      .msg {
        position: absolute;
        top: 0;
        left: 0;
        margin-left: 30rpx;

        .num {
          margin-top: 26rpx;
          font-size: 44rpx;
          color: #333333;
        }

        .text {
          margin-top: 12rpx;
          font-size: 26rpx;
          color: #666666;
        }
      }
    }
  }

  .tabs {
    padding: 0 32rpx;
    width: 100%;
    box-sizing: border-box;
  }

  .area-2 {
    display: flex;
    flex-direction: column;

    width: 686rpx;

    .item {
      margin-top: 32rpx;
      width: 100%;
      background: #fff;
      border-radius: 16rpx;
      padding: 0 20rpx 20rpx 20rpx;
      box-sizing: border-box;
      box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.03);

      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 96rpx;

        .title {
          font-size: 28rpx;
          font-weight: bold;
        }

        .datail-btn {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 40rpx;
          height: 40rpx;
          background: #faf2e0;
          border-radius: 50%;

          font-size: 26rpx;
          font-weight: bold;
          color: #d39f59;
        }
      }

      .content {
        .row {
          display: flex;
          justify-content: space-between;
          font-size: 28rpx;

          &:nth-child(2) {
            margin-top: 20rpx;
          }

          .text {
            color: #666666;
          }
        }
      }
    }
  }
}
</style>
